<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">4S店:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="condition.ssss" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">保险公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="condition.insuranceCompany" placeholder="请选择保险公司" clearable>
					<el-option v-for="item in queryActiveCombo" :label="item.insuranceCompanyName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">基盘类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="condition.baseType" placeholder="选择项目" clearable>
					<el-option v-for="item in insTypeConvertData" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="4">
				<el-input size="small" :maxlength="200" style="width: 100%;" v-model="condition.plateNum" placeholder="请输入">
							<el-select size="small" v-model="condition.paramsKey " style="width: 90px;" placeholder="" slot="prepend">
							<el-option label="车牌号" value="plateNum"></el-option>
							<el-option label="VIN" value="vin"></el-option>
							<el-option label="保单号" value="contractNo"></el-option>
							<el-option label="被保险人" value="insured"></el-option>
						</el-select>
						</el-input>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="1">
				<p class="queryLabel">费率差异:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="condition.diff" placeholder="请选择费率差异" clearable>
					<el-option label="有" value="1"></el-option>
					<el-option label="无" value="0"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">审核状态:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="condition.commissionType" placeholder="请选择审核状态" clearable>
					<el-option label="未审核" value="0"></el-option>
					<el-option label="已审核" value="1"></el-option>
					<el-option label="审核未通过" value="2"></el-option>
					<el-option label="已修改完成" value="3"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">出单日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" style="width: 90%;" v-model="condition.startDate" format="yyyy-MM-dd" :editable=false type="date" placeholder="起始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">至:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" style="width: 90%;" v-model="condition.stopDate" format="yyyy-MM-dd" :editable=false type="date" placeholder="结束日期">
				</el-date-picker>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" size="small" v-on:click='queryAll'>查询</el-button>
				<el-button type="primary" size="small" v-on:click='examine' >审核</el-button>
				<el-button type="danger" size="small" v-on:click='orderDel'>删除</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="4S店" prop="oName" width="200">
					</el-table-column>
					<el-table-column label="出单日期" align="right" prop="outOrderDate" width="140" :formatter="converOutOrderDate">
					</el-table-column>
					<el-table-column label="保险类型" align="right" prop="insureType" :formatter="insuretypeCov" width="100">
					</el-table-column>
					<el-table-column label="车型" align="right" prop="carModel" width="100">
					</el-table-column>
					<el-table-column label="被保险人" align="right" prop="insured" width="100">
					</el-table-column>
					<el-table-column label="投保公司" align="right" prop="insuranceCompanyName" width="100">
					</el-table-column>
					<el-table-column label="商业险金额" align="right" prop="syPrice" width="120">
					</el-table-column>
					<el-table-column label="商业险协议费率" align="right" prop="syCommission" width="140">
					</el-table-column>
					<el-table-column label="商业险提报费率" align="right" prop="syCommissionTemp" width="140">
					</el-table-column>
					<el-table-column label="商业险临时佣金说明" align="right" prop="syCommissionExp" width="160">
					</el-table-column>
					<el-table-column label="交强险金额" align="right" prop="jqPrice" width="120">
					</el-table-column>
					<el-table-column label="交强险协议费率" align="right" prop="jqCommission" width="140">
					</el-table-column>
					<el-table-column label="交强险提报费率" align="right" prop="jqCommissionTemp" width="140">
					</el-table-column>
					<el-table-column label="交强险临时佣金说明" align="right" prop="jqCommissionExp" width="160">
					</el-table-column>
					<el-table-column label="费率审核" align="right" prop="commissionType" :formatter="statusCov" width="140">
					</el-table-column>
					<el-table-column label="保费预警" align="right" prop="priceWarningType" :formatter="statusCovs" width="140">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="请选择该审核是否通过？" v-model="sureShow" size="tiny">
			<div>
				<el-row :gutter="24">
					<el-col :span="14">
						<span style="font-size: 16px;">4S店：{{companyName}}</span>
					</el-col>
					<el-col :span="10">
						<span style="font-size: 16px;">被保险人：{{peopleName}}</span>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="14">
						<span style="font-size: 16px;">保险公司：{{insuranceCompanyName}}</span>
					</el-col>
					<el-col :span="10">
						<span style="font-size: 16px;">出单日期：{{outDate}}</span>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="10">
						<span style="font-size: 16px;">保险类型：{{insureType=="sb"?"新保":"续保"}}</span>
					</el-col>
				</el-row>
			</div>
			<div style="font-size: 16px;" v-if="priceWarningType == '0'">
				<p style="font-size: 16px;">保险金额超出预警！</p>
			</div>
			<div style="font-size: 16px;">
				<span style="font-size: 16px;" v-if="syCommission">商业险协议费率：{{syCommission}}%</span>&nbsp;&nbsp;&nbsp;<span style="font-size: 16px;" v-if="syCommissionTemp">商业险临时费率：{{syCommissionTemp}}%</span><br> <span style="font-size: 16px;" v-if="jqCommission">交强险协议费率：{{jqCommission}}%</span>&nbsp;&nbsp;&nbsp;<span style="font-size: 16px;" v-if="jqCommissionTemp">交强险临时费率：{{jqCommissionTemp}}%</span>
			</div>
			<br>
			<div style="font-size: 16px;">
				<el-row gutter="24">
					<el-col :span="8">
						<strong style="font-size: 16px;">审核说明:</strong>
					</el-col>
				</el-row>
				<el-row gutter="24">
					<el-col :span="24">
						<el-input size="small" v-model="remark" :maxlength="200" type="textarea"></el-input>
					</el-col>
				</el-row>
			</div>
			<!--<div style="font-size: 16px;">
				请选择该审核是否通过？
			</div>-->
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" @click="sureAll(2)">不通过</el-button>
				<el-button type="primary" v-on:click='sureAll(1)'>通过</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				companyName: '', //审核时4s店
				outDate: '', //审核时出单日期
				peopleName: '', //审核时被保险人
				insuranceCompanyName: '', //审核时显示保险公司
				insureType:'',//审核时保单类型
				remark: '',
				//商业险金额
				Syprice: '',
				syCommission: '',
				syCommissionTemp: '',
				jqCommission: '',
				jqCommissionTemp: '',
				priceWarningType: '',
				PromptData: [], //页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				sureShow: false, //审核弹框
				multipleSelection: [], //checkbox选择的数据
				queryActiveCombo: [], //保险公司查询数据
				queryssssCombo: [], //4s店查询数据
				insTypeConvertData: [], //基盘类别数据
				tableData: { //表格数据
					dataList: [],
					total: 0
				},
				condition: {
					insuranceCompany: '', //保险公司
					startDate: '', //出单开始时间
					stopDate: '', // 出单结束时间
					baseType: '', //基盘类别
					ssss: '', //4s店
					commissionType: '', //审核状态
					diff: '1', //差异
					paramsKey:'plateNum',//查询类型
					plateNum:"",//查询类型的值
				}, //查询条件
			}
		},
		methods: {
			//删除保险单
			orderDel: function() {
				if(this.$data.multipleSelection.length == 1) {
					this.$confirm('此操作将删除选择的保险单信息, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$http({
							method: 'POST',
							url: this.API_ROOT + '/insurance/commission/exam/del',
							params: {
								qId: this.$data.multipleSelection[0].quotationId,
							}
						}).then(function(resp) {
							debugger;
							this.$message(resp.data.msg);
							this.queryAll();
						}, function(error) {})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message.error("请选择一条数据！");
				}
			},
			//审核
			examine: function() {
				//将审核界面信息置空
				this.$data.Syprice = "";
				this.$data.syCommission = "";
				this.$data.syCommissionTemp = "";
				this.$data.jqCommission = "";
				this.$data.jqCommissionTemp = "";
				this.$data.priceWarningType = "";
				this.$data.companyName = "";
				this.$data.outDate = "";
				this.$data.peopleName = "";
				this.$data.insuranceCompanyName = "";
				this.$data.insureType = "";
				if(this.$data.multipleSelection.length == 1) {
					this.$data.Syprice = this.$data.multipleSelection[0].syPrice;
					this.$data.syCommission = this.$data.multipleSelection[0].syCommission;
					this.$data.syCommissionTemp = this.$data.multipleSelection[0].syCommissionTemp;
					this.$data.jqCommission = this.$data.multipleSelection[0].jqCommission;
					this.$data.jqCommissionTemp = this.$data.multipleSelection[0].jqCommissionTemp;
					this.$data.priceWarningType = this.$data.multipleSelection[0].priceWarningType;
					this.$data.companyName = this.$data.multipleSelection[0].oName;
					this.$data.outDate = this.$data.multipleSelection[0].outOrderDate;
					this.$data.peopleName = this.$data.multipleSelection[0].insured;
					this.$data.insuranceCompanyName = this.$data.multipleSelection[0].insuranceCompanyName;
					this.$data.insureType = this.$data.multipleSelection[0].insureType;
					this.$data.sureShow = true;
					this.$data.remark = "";
				} else {
					this.$message.error("请选择一条数据")
				}
			},
			//整体查询
			queryAll: function() {
				if(this.$data.condition.startDate){
					this.$data.condition.startDate = moment(this.$data.condition.startDate).format("YYYY-MM-DD");
				}
				if(this.$data.condition.stopDate){
				    this.$data.condition.stopDate = moment(this.$data.condition.stopDate).format("YYYY-MM-DD");	
				}
				this.$http.post(this.API_ROOT + '/insurance/commission/exam/page', this.$data.condition, {
					params: {
						limit: this.page.pageSize,
						start: this.$data.CurentPage
					}
				}).then(resp => {
					debugger;
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//确认
			sureAll: function(type) { //审核是否通过

				this.$data.sureShow = true;
				this.$http.post(this.API_ROOT + '/insurance/commission/exam/confim', this.$data.multipleSelection, {
					params: {
						type: type,
						remark: this.$data.remark,
					}
				}).then(resp => {
					debugger;
					if(resp.data.success) {
						this.queryAll();
						this.$message(resp.data.msg);
						this.$data.sureShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});

			},
			//详情
			infoAll: function() {

			},
			//查询4s店
			queryssss: function() {
				this.$http.get(this.API_ROOT + '/insurance/commission/getCarCompanys', {
					params: {}
				}).then((response) => {
					debugger;
					this.queryssssCombo = response.data.data;
				}, (response) => {
					debugger;
				});
			},
			//超出预警，标红
			tableRowClassName: function(row, index) {
				debugger;
				if(row.commissionType == 0 || row.priceWarningType == 0 || row.commissionType == 2) {
					return 'positive-row';
				}
				if(row.commissionType == 3){
					return 'positiveTwo-row';
				}
				//				if(row.conflMin && row.confMax && !row.modelMin && !row.modelMax && !row.seriesMin && !row.seriesMax) { //配置不为空，车型车系为空
				//					if(row.commercialinsurancePrice < row.conflMin || row.commercialinsurancePrice > row.confMax) { //商业险价格小于最小值，大于最大值
				//						return 'positive-row';
				//					}
				//				} else if(!row.conflMin && !row.confMax && row.modelMin && row.modelMax && !row.seriesMin && !row.seriesMax) { //车型不为空，配置车系为空
				//					if(row.commercialinsurancePrice < row.modelMin || row.commercialinsurancePrice > row.modelMax) { //商业险价格小于最小值，大于最大值
				//						return 'positive-row';
				//					}
				//				} else if(!row.conflMin && !row.confMax && !row.modelMin && !row.modelMax && row.seriesMin && row.seriesMax) { //车系不为空，配置车型为空
				//					if(row.commercialinsurancePrice < row.seriesMin || row.commercialinsurancePrice > row.seriesMax) { //商业险价格小于最小值，大于最大值
				//						return 'positive-row';
				//					}
				//				}
				//				console.log(JSON.stringify(row)+'/'+index)
			},
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.queryAll();
			},
			converOutOrderDate: function(row, column) {
				debugger;
				if(row.outOrderDate) {
					return this.moment(row.outOrderDate).format("YYYY-MM-DD");
				}
			},
			//佣金审核状态解析
			statusCov: function(row, column) {
				if(row.commissionType == 0) {
					return "未审核"
				}
				if(row.commissionType == 1) {
					return "审核通过"
				}
				if(row.commissionType == 2) {
					return "审核未通过"
				}
				if(row.commissionType == 3) {
					return "已修改完成"
				}
			},
			insuretypeCov: function(row, column){
				if(row.insureType == "sb"){
					return "新保";
				}
				if(row.insureType == "xb"){
					return "续保";
				}
			},
			//保险预警状态解析
			statusCovs: function(row, column) {
				if(row.priceWarningType == 0) {
					return "未审核";
				}
				if(row.priceWarningType == 1) {
					return "审核通过";
				}
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.condition.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.condition.ssss = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//查询条件出单开始日期为当月第一天
			getMonthFirstDay: function(){
				debugger;
				var nowDay = new Date();
				var nowYear = nowDay.getFullYear();
				var nowMonth = nowDay.getMonth() + 1;
				var nowFirstDay = nowYear +"-" + nowMonth + "-01";
				this.$data.condition.startDate = nowFirstDay;
			},

		},
		created: function() {
			this.getarea();
			this.getCompanyInfo();
			//获取保险公司下拉
			this.$http.get(this.API_ROOT + '/insurance/companys', {
				params: {}
			}).then((response) => {
				this.$data.queryActiveCombo = response.data.data;
			}, (response) => {});
			//4s店查询
			this.queryssss();
			//获取基盘类别
			this.$http.get(this.API_ROOT + '/base/dict/combo/insurance', {
				params: {
					group: "insuranceType"
				}
			}).then((response) => {
				this.$data.insTypeConvertData = response.data;
			}, (response) => {});
			//出单日期当月第一天
			this.getMonthFirstDay();
		}
	}
</script>

<style>
	.el-table .positive-row {
		background: #fb8e7c;
	}
	.el-table .positiveTwo-row {
		background: #F7BA2A;
	}
</style>